<!--
 * @Description: 消息通知
 * @Author: zheng yiliang
 * @Date: 2021-06-11 14:48:16
 * @LastEditTime: 2021-06-12 17:12:35
 * @LastEditors: zheng yiliang
-->
<template>
  <div class="notice comments" v-if="nickname">
    <div class="f-cb"></div>
    <div class="mt20">
      <ul class="message-list" id="message-list">
        <li
          v-for="(item, i) in notices.comments"
          :key="i"
          class="zoomIn article"
        >
          <div class="comment-parent">
            <el-avatar
              style="position: absolute"
              class="header-img"
              :size="40"
              :src="item.avatar"
            ></el-avatar>

            <div class="info">
              <span class="username">{{ item.name }}</span>
              <span class="blogger" v-if="item.type === 0">站长</span>
            </div>
            <div class="comment-content">
              <p>{{ item.comment }}</p>
            </div>
            <p class="info info-footer">
              <!-- <i class="fa fa-map-marker"></i> -->
              <!-- <span>{{ `${item.address.province}${item.address.city}` }}</span> -->
              <span class="comment-time">{{
                item.create_time | commentDate
              }}</span>
              <el-button type="text" class="btn-reply" @click="toDetail(item)"
                >详情</el-button
              >
            </p>
          </div>
          <div v-show="item.reply.length" class="line-hr"></div>
          <div class="comment-child" v-for="(reply, j) in item.reply" :key="j">
            <el-badge value="new" :hidden="reply.is_handle !== 2">
              <el-avatar
                style="position: absolute"
                class="header-img"
                :size="40"
                :src="reply.fromAvatar"
              ></el-avatar>
            </el-badge>
            <div class="info">
              <span class="username">{{ reply.from }}</span>
              <span class="blogger" v-if="reply.fromType === 0">站长</span>
              <span style="padding-right: 5px">回复了</span>
              <span class="username" style="color: #f56c6c; font-size: 16px"
                >你</span
              >
              <span>{{ reply.comment }}</span>
            </div>
            <p class="info">
              <span class="comment-time">{{
                reply.create_time | commentDate
              }}</span>
              <!-- <el-button
                v-if="reply.is_handle !== 2"
                type="text"
                class="btn-reply"
                >已读</el-button
              > -->
              <!-- <el-button
                style="color: #f56c6c"
                class="btn-reply"
                v-if="reply.is_handle == 2"
                type="text"
                >未读</el-button
              > -->
              <!-- <el-button
                  type="text"
                  v-if="_inputChildShow(i, j)"
                  class="btn-reply"
                  @click="hideReplyInput(i, reply.from, reply.fromId, j)"
                  >收起</el-button
                ><el-button
                  type="text"
                  v-else
                  class="btn-reply"
                  @click="showReplyInput(i, reply.from, reply.fromId, j)"
                  >回复</el-button
                > -->
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="f-cb"></div>
    <div class="mt20">
      <ul class="message-list" id="message-list">
        <li
          v-for="(item, i) in notices.messages"
          :key="i"
          class="zoomIn article"
        >
          <div class="comment-parent">
            <el-avatar
              style="position: absolute"
              class="header-img"
              :size="40"
              :src="item.avatar"
            ></el-avatar>
            <div class="info">
              <span class="username">{{ item.name }}</span>
              <span class="blogger" v-if="item.type === 0">站长</span>
            </div>
            <div class="comment-content">
              <p>{{ item.comment }}</p>
            </div>
            <p class="info info-footer">
              <span class="comment-time">{{
                item.create_time | commentDate
              }}</span>
              <el-button type="text" class="btn-reply" @click="toMessage(item)"
                >详情</el-button
              >
            </p>
          </div>
          <div v-show="item.reply.length" class="line-hr"></div>
          <div class="comment-child" v-for="(reply, j) in item.reply" :key="j">
            <el-badge value="new" :hidden="reply.is_handle !== 2">
              <el-avatar
                style="position: absolute"
                class="header-img"
                :size="40"
                :src="reply.fromAvatar"
              ></el-avatar>
            </el-badge>
            <div class="info">
              <span class="username">{{ reply.from }}</span>
              <span class="blogger" v-if="reply.fromType === 0">站长</span>
              <span style="padding-right: 5px">回复了</span>
              <!-- <span class="username">你</span> -->
              <span class="username" style="color: #f56c6c; font-size: 16px"
                >你</span
              >
              <span>{{ reply.comment }}</span>
            </div>
            <p class="info">
              <span class="comment-time">{{
                reply.create_time | commentDate
              }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div v-else>
    <null notices="请先登录"></null>
  </div>
</template>
<script>
import Null from '@/components/null'
import { mapGetters, mapMutations } from 'vuex'
import { commentsRead, messagesRead, news } from '@/api'
export default {
  components: {
    Null
  },
  methods: {
    ...mapMutations('notice', ['saveNotice']),

    toDetail(row) {
      const params = {
        _id: row._id
      }
      commentsRead(params)
      news().then((data) => {
        if (data._RejCode === '00000000') {
          this.saveNotice(data.data)
        }
      })
      this.$router.push(`/detail?id=${row.article_id}`)
    },
    toMessage(row) {
      news().then((data) => {
        if (data._RejCode === '00000000') {
          this.saveNotice(data.data)
        }
      })
      messagesRead({ _id: row._id })
      this.$router.push('/message')
    }
  },
  computed: {
    ...mapGetters(['nickname', 'notices'])
  },
  mounted() {
    news().then((data) => {
      if (data._RejCode === '00000000') {
        this.saveNotice(data.data)
      }
    })
  }
}
</script>
<style scoped>
@import '../styles/css/message.css';
</style>
<style lang="scss" scoped>
.notice {
  // background: #fff;
  // padding: 8px;
  // position: relative;
  // margin-top: 20px;
  // text-align: center;
}
</style>
